<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<form action="" align = "center">
		你的爱好是？？ <input type="checkbox" id = checkboxAll>全选/全不选<br />
		<input type="checkbox" name="items" value="足球">足球
		<input type="checkbox" name="items" value="篮球">篮球
		<input type="checkbox" name="items" value="羽毛球">羽毛球
		<input type="checkbox" name="items" value="乒乓球">乒乓球<br />
		<input type="button" id="checkbuttonAll" value="全选">
		<input type="button" id="checkbuttonnoAll" value="全不选">
		<input type="button" id="checkbuttonrev" value="反选">
		<input type="button" id="sub" value="提交">
	</form>
</body>
<script>
	var checkbuttonAll = document.getElementById('checkbuttonAll');
	var items = document.getElementsByName('items');
	var checkbuttonnoAll = document.getElementById('checkbuttonnoAll');
	var checkbuttonrev = document.getElementById('checkbuttonrev');
	var sub = document.getElementById('sub');
	var checkboxAll = document.getElementById('checkboxAll');
	// 全选按钮
	checkbuttonAll.onclick = function(){
		for(var i = 0; i < items.length; i++){
			items[i].checked = true;
		}
		checkboxAll.checked = true;
	}
	// 全不选按钮
	checkbuttonnoAll.onclick = function(){
		for(var i = 0; i < items.length; i++){
			items[i].checked = false;
		}
		checkboxAll.checked = false;
	}
	// 反选按钮
	checkbuttonrev.onclick = function(){
		checkboxAll.checked = true;
		for(var i = 0; i < items.length; i++){
			items[i].checked = ! items[i].checked;
			if(!items[i].checked){
				checkboxAll.checked = false;
			}
		}
	}
	// 提交按钮
	sub.onclick = function(){
		for(var i = 0; i < items.length; i++){
			if(items[i].checked){
				console.log(items[i].value);
			}
			
		}
	}
	// 全选/全不选
	checkboxAll.onclick = function(){
		for(var i = 0; i < items.length; i++){
			items[i].checked = this.checked;
		}
	}
	
	// 为四个多选框分别绑定单击响应函数
	for(var i = 0; i < items.length; i++){
		items[i].onclick = function(){
			checkboxAll.checked = true;
			for(var j = 0; j < items.length; j++){
				if(!items[j].checked){
					checkboxAll.checked = false;
					break;
				}
			}	
		}
 	}
</script>
</html>